<template>
  <v-list class="py-0" dense>
    <v-list-item-group>
      <template v-for="(item, i) in products">
        <v-list-item :key="item.id">
          <v-row style="width: 100%" class="d-flex align-center">
            <v-col cols="3">
              <v-img
                :src="item.productPic"
                height="55"
                class="grey lighten-2"
              ></v-img>
            </v-col>
            <v-col class="d-flex flex-column" cols="7">
              <span class="subtitle-2 text-no-wrap text-truncate">{{
                item.productName
              }}</span>
              <span class="caption text--secondary">{{
                JSON.parse(item.productAttr)
                  .map(each => each.value)
                  .join('/')
              }}</span>
              <span class="caption red--text">{{ '￥' + item.price }}</span>
            </v-col>
            <v-col cols="2">
              <span
                class="subtitle-2"
                style="color: #2AB795"
                v-text="`x${item.quantity}`"
              ></span>
            </v-col>
          </v-row>
        </v-list-item>
        <v-divider
          v-if="i < $store.state.currSettlingProducts.length - 1"
          :key="i"
        ></v-divider>
      </template>
    </v-list-item-group>
  </v-list>
</template>

<script>
export default {
  name: 'product-list',
  props: ['products']
};
</script>
